<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="flexible" content="initial-dpr=2" />
    

    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="bookmark" href="favicon.ico" />
    <link rel="stylesheet" href="index.css" />
    <title>${name}</title>
    <script src="./flexible/flexiblev0.js"></script>
  </head>

  <body>
    <div id="app" class="page">
      <div class="page__header"><h1>${name}</h1></div>

      <div class="page__body">
        <div class="list">
          <div class="list-line">
            <label for="name" class="list-line__label"> name: </label>
            <input type="text" id="name" value="liz" />
          </div>
          <div class="list-line">
            <label for="age" class="list-line__label"> age: </label>
            <input type="text" id="age" value="18" />
          </div>
        </div>
      </div>

      <section>
        
        <h2>list容器</h2>
        <div class="q-list">
          <div class="q-list__hd">列表头</div>
          <div class="q-list__bd">
            <div class="q-list-line">
              <div class="q-list-line__hd">头部</div>
              <div class="q-list-line__bd">主内容</div>
              <div class="q-list-line__ft">尾部</div>
            </div>
          </div>
        </div>
      </section>
      <section>
        
        <h2>input结构</h2>
        <div class="q-list">
          <div class="q-list__hd">input结构</div>
          <div class="q-list__bd">
            <div class="q-input q-list-line">
              <div class="q-list-line__hd q-input__hd">
                <i class="q-input__icon q-icon-Backlog1"></i>
                <span class="q-input__label">input标题</span>
              </div>
              <div class="q-list-line__bd q-input__bd">
                <input
                  class="q-input__control"
                  placeholder="呵呵"
                  type="text"
                />
              </div>
            </div>

            <div class="q-input q-list-line">
              <div class="q-list-line__hd q-input__hd">
                <i class="q-input__icon q-icon-Backlog1"></i>
                <span class="q-input__label">input标题</span>
              </div>
              <div class="q-list-line__bd q-input__hd">
                <input
                  class="q-input__control"
                  placeholder="呵呵"
                  type="text"
                />
              </div>
              <div class="q-list-line__ft">
                <span class="q-input__extra">元</span>
              </div>
            </div>

            <div class="q-input q-list-line">
              <div class="q-list-line__hd q-input__hd">
                <i class="q-input__icon q-icon-Backlog1"></i>
                <span class="q-input__label">input标题</span>
              </div>
              <div class="q-list-line__bd q-input__hd">
                <input
                  class="q-input__control"
                  placeholder="呵呵"
                  type="text"
                />
              </div>
              <div class="q-list-line__ft">
                <span class="q-input__extra q-icon-Profit"></span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="page__footer">
      @@include('../_import-part.html')
      <script src="index.js"></script>
    </div>
  </body>
</html>
